<template>
<div style="height: 500px;width: 100%;">
	<div>
	  <div class="center-section">
	    <el-button type="primary" @click="goadd">
	      <el-breadcrumb-item>
			  添加二级类型
	      </el-breadcrumb-item>
	    </el-button>
	  </div>
	  <div class="right-section">
	    <span></span>
	  </div>
	</div>
	  <div>
	    <el-table :data="data.type" style="width: 100%">
		<el-table-column label="一级类型">
	    <el-table-column prop="tid" label="一级类型 ID" align="center" width="150" />
	    <el-table-column prop="prio" label="顺序" align="center" width="150" />
	    <el-table-column prop="tname" label="一级类型名称" align="center"  width="150" />
	  	</el-table-column>
		<el-table-column label="二级类型">
		<template #default="scope">
		<div v-for="(x,index) in scope.row.children" style="display: flex; align-items: center">
		<span style="margin-left: 5px">{{x.tid}}</span>
		<span  style="margin-left: 10px">
			  		{{ x.tname }}</span>
			  	<!-- 图标按钮 div -->
			  	<div style="width: 150px;">
			  		<!-- 修改按钮 -->
			  		<el-button @click="go2Update(x)" type="primary" :icon="Edit" circle />
			  		<!-- 删除按钮 -->
			  		<el-button @click="del(x.tid)" type="danger" :icon="Delete" circle />
			  	</div>
			  	  </div>
			  	</template>
			   </el-table-column>
	    </el-table>
	  </div>
	     <!-- 弹出框 -->
	       <el-dialog 
	         v-model="vive" 
	         title="编辑二级类型信息" 
	         width="500px"
	       >
	         <el-form :model="data.type1" label-width="120px">
	  			 <el-form-item label="类型ID">
	  			   <el-input v-model="data.type1.tid" autocomplete="off" readonly />
	  			 </el-form-item>
	           <el-form-item label="类型名称">
	             <el-input v-model="data.type1.tname" autocomplete="off" />
	           </el-form-item>
	           <el-form-item label="显示顺序">
	             <el-input v-model.number="data.type1.prio" type="number" />
	           </el-form-item>
	         </el-form>
	         <template #footer>
	           <div class="dialog-footer">
	             <el-button @click="vive = false">取消</el-button>
	             <el-button type="primary" v-if="data.type1.tid==0" @click="save()">添加	</el-button>
				<el-button type="primary" v-if="data.type1.tid>0" @click="save()">修改</el-button>
	           </div>
	         </template>
	       </el-dialog>
</div>
</template>
<script lang="ts" setup>
	import {ref,reactive,onMounted} from "vue"
	import {$get,$postx,$postf,$postj} from "../../../ajax/index.js"
	import myalert from "../../../utils/myalert.js"
	import { InfoFilled } from '@element-plus/icons-vue'
	import { Timer } from '@element-plus/icons-vue'
	import type { ComponentSize, FormInstance, FormRules,ElMessage } from 'element-plus'
	import {
	Check,
	Delete,
	Edit,
	Message,
	Search,
	Star,
	} from '@element-plus/icons-vue'
	const visible = ref(false)
	const vive = ref(false)
	const data=reactive({
		type:[],//显示所有类型
		type1:[],//弹出框里的数据
		// types:[tid:0,children:[],],
	})
	// 挂载
	onMounted(()=>{
		$get("/api/adm/type/findtype")
		.then((resp)=>{
			console.log(resp.data.data)
			data.type=resp.data.data;
		})
	})
	//去添加
	function goadd(){
		vive.value=true;
		data.type1.tid=0;
		data.type1.tname=null;
		data.type1.prio=0;
	}
	// 去修改
	function go2Update(row){
		vive.value=true;
		data.type1.tid=row.tid;
		data.type1.tname=row.tname;
		data.type1.prio=row.prio;
	}
	function save(){
		if(data.type1.tid==0){
		console.log(data.type1.tid)
		$postx("/api/adm/type/add",data.type1)
		.then((resp)=>{
			console.log(resp.data.data)
			data.type=resp.data.data;
		})
		}
		if(data.type1.tid>0){
		console.log(data.type1.tid);
		$postx("/api/adm/type/update",data.type1)
		.then((resp)=>{
			console.log(resp.data.data)
			data.type=resp.data.data;
		})
		}
		vive.value = false;
	}
	function del(tid){
		console.log(tid)
	$get("/api/adm/type/del/"+tid)
	.then((resp)=>{
		console.log(resp.data.data)
		data.type=resp.data.data
		ElMessage({
			message: "登陆成功！",
			type: 'success',
		})
	})	
	}
</script>

<style scoped>
	.el-button + .el-button {
	  margin-left: 8px;
	}
</style>
